<template>
  <div class="flex row items-center justify-between header" :id="headerId" :style="{ color: dark ? '#fff' : '#000' }">
    <div class="tit"></div>
    <div class="crane"></div>
    <div class="user"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

import { headerId } from '../setup';

export default defineComponent({
  name: 'terminal-header',

  props: {
    craneId: {
      type: String,
      required: true,
    },
    dark: {
      type: Boolean,
      required: true,
    },
  },

  setup() {
    return {
      headerId,
    };
  },
});
</script>
<style lang="scss" scoped>
.header {
  height: 50px;

  .tit {
    font-size: 28px;
    font-weight: bold;
  }
  .crane {
    font-size: 26px;
    font-weight: bold;
  }
  .user {
    font-size: 16px;
  }
}
</style>
